<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建元素和添加元素</title>
</head>
<style type="text/css">
    div{
        margin: 10px 0px;
    }
    span{
        color: white;
        padding: 8px;
    }
    .red{
        background-color: red;
    }
    .blue{
        background-color: blue;
    }
    .green{
        background-color: green;
    }
    .pink{
        background-color: pink;
    }
    .gray{
        background-color: gray;
    }
</style>
<body>
    <h3>prepend()方法前追加内容</h3>
    <h3>prepend()方法前追加内容</h3>
    <h3>append()方法后追加内容</h3>
    <h3>append()方法后追加内容</h3>

    <span class="red">男神</span>
    <span class="blue">偶像</span>
    <div class="green">
        <span>小鲜肉</span>
    </div>
</body>
<!-- 
    创建元素和添加元素
        创建元素
            $("内容")
        添加元素
            1. 前追加子元素
                指定元素.prepend(内容) 在指定元素内部的最前面追加内容，内容可以是字符串、html元素或者jquery对象
                $(内容).prependTo(指定元素) 把内容追加到指定元素的最前面，内容可以是字符串，html元素或者jquery对象
            2. 后追加子元素
                指定元素.append(内容) 在指定元素内部的最后面追加内容，内容可以是字符串、html元素或者jquery对象
                $(内容).appendTo(指定元素) 把内容追加到指定元素的最后面，内容可以是字符串，html元素或者jquery对象
            3. 前追加同级元素
                before()  在指定元素的前面追加内容
            4. 后追加同级元素
                after()   在指定元素的后面追加内容
        
        注意：
            在添加元素时，如果元素本身不存在（新建的元素），此时会将元素追加到指定位置
            如果元素本身存在（已有元素）会将原来元素直接剪切直接设置到指定位置

-->
<script src="js/jquery-3.7.1.js"></script>
<script type="text/javascript">
    // 创建元素
    var p = "<p>这是一个p标签</p>"
    console.log(p);
    console.log($(p))
    // 创建元素
    var span = "<span>hahah</span>"
    // 得到指定元素，并在元素的内部最前面追加内容
    $(".green").prepend(span);
    var span2 = "<span>start</span>"
    $(span2).prependTo($(".green"))

    var span3 = "<span>end</span>"
    var span4 = "<span>endend</span>"
    $(".green").append(span3);
    $(span4).appendTo($(".green"))

    // 将已存在内容追加到指定元素中
    $(".green").append($(".red"))

    // 同级追加
    var sp1 = "<span class='pink'>女神</span>"
    var sp2 = "<span class='gray'>歌手</span>"  
    $(".blue").before(sp1);
    $(".blue").after(sp2);
</script>

</html>